import React, { PureComponent } from 'react';
import { Card } from 'antd';
import CustomizeFence from './customizeFence';
import DistrictFence from './districtFence';
import PropTypes from 'prop-types';
export const fenceUserTypeHash = {
  '0': '非经销商',
  '1': '经销商',
};
export const repositoryHash = {
  '0': '主库',
  '1': '二库',
  '2': '二网',
};
class ElectricFence extends PureComponent<any, any> {
  static contextTypes = {
    permissions: PropTypes.array,
  };

  constructor(props: any) {
    super(props);
    this.state = {
      activeTabKey: sessionStorage.getItem('electricFenceMngTab') || 'customize',
    };
  }

  onTabChange = (key: any) => {
    sessionStorage.setItem('electricFenceMngTab', key);
    this.setState({ activeTabKey: key });
  };

  render() {
    const {
      location: { pathname = '/' },
    } = this.props;
    const { activeTabKey } = this.state;
    const tabList = [
      {
        key: 'customize',
        tab: '自定义',
      },
      {
        key: 'district',
        tab: '行政区',
      },
    ];
    const contentList = {
      customize: <CustomizeFence pathname={pathname} permissions={this.context.permissions} />,
      district: <DistrictFence pathname={pathname} permissions={this.context.permissions} />,
    };
    return (
      <Card
        size="small"
        bordered={false}
        style={{ backgroundColor: 'rgba(255,255,255,0)' }}
        headStyle={{ backgroundColor: 'rgba(255,255,255)' }}
        bodyStyle={{ padding: '1px 0 0 0' }}
        tabList={tabList}
        activeTabKey={activeTabKey}
        onTabChange={this.onTabChange}
      >
        {contentList[activeTabKey]}
      </Card>
    );
  }
}
export default ElectricFence;
